<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="p" %>
<%String ctx = request.getContextPath(); %>

<script type="text/javascript">
function search(){
	var usertypeId = document.getElementById("usertypeId").value;
    if(usertypeId != "all"){
    	window.location.href="typemenu!list?usertypeId="+usertypeId;
    }
}
</script>

<div style="width:100%" class="f_l margin1">
    <div id="search">
		<s:form id="searchForm" action="typemenu!list" method="post" theme="simple">
		    <div align="left" style="width: 100%">
		        <select name="usertypeId" id="usertypeId" onchange="javascript:search();">
		            <option value="all" <s:if test="%{type == null}">selected="selected"</s:if>>-- 请选择用户类型 --</option>
		            <s:iterator value="allUsertypes" status="status">
		                <option value="${id}" <s:if test="%{usertypeId == id}">selected="selected"</s:if>>${name}</option>
		            </s:iterator>
		        </select>
		    </div>
    	</s:form>
    </div>
    <br>
    <div>
        <s:form id="" action="typemenu!update" method="post" theme="simple">
        <div>
            <s:iterator value="firstClassMenus" status="status">
              <div>
                <div style="line-height: 30px;">
                    <img style="float: left" width="30" height="30" src="<%=ctx%>${frontPic}"/> 
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    ${name}
                </div>
                
                <div id="menuDivOf${id}">
                </div>
                
                <script>
                    setTimeout('getMenus(${id})',${(status.index + 1) * 500});
                </script>
              </div>
            </s:iterator>
        </div>
        <div align="center">
            <input type="submit" value="确认"/>
        </div>
        <input type="hidden" name="usertypeId" value="${usertypeId}"/>
        </s:form>
    </div>
</div>
<script>
function getMenus(id){
	var usertypeId = document.getElementById("usertypeId").value;
	if(usertypeId == 'all'){
        return;
    }
	var menuDiv = document.getElementById("menuDivOf"+id);
	$.ajax({
	  	  type: "POST",
	  	  url: "<s:url action='typemenu!findMenuBySuperiorId' namespace='/typemenu' />",
	  	  data: "superiorId=" + id + "&usertypeId=" + usertypeId,
	  	  dataType: 'json',
	  	  complete:function(response){
	  		  var result = '('+response.responseText+')';
	  		  result = eval(result);
	  		  var html = "";
	  		  for(var i = 0; i < result.length; i++){
		  		  var innerhtml = "";
		  		  innerhtml = "<div style='margin-left: 7%'>"
		  	      //innerhtml += "<input type='checkbox' style='border:0' name='ids' value='" + result[i].id + "'>"
		  		  innerhtml += result[i].name;

		  		  innerhtml += "<div style='margin-left: 3%'><table  style='width: 100%'>";
		  		  for(var j = 0; j < result[i].lowerMenus.length; j++){
                      if(j % 5 == 0){
			              innerhtml += "<tr style='width: 100%'>"  
                      }
                      if(j == result[i].lowerMenus.length -1){
                    	  innerhtml += "<td><input type='checkbox' style='border:0' name='menuIds' value='" + result[i].lowerMenus[j].id + "' ";
                          if(result[i].lowerMenus[j].haveRight){
                              innerhtml += "checked='true' ";
                          }
                    	  innerhtml += ">"
   		  		           + result[i].lowerMenus[j].name + "</td>";
                      } else {
                          innerhtml += "<td width='20%'><input type='checkbox' style='border:0' name='menuIds' value='" + result[i].lowerMenus[j].id + "' "
                          if(result[i].lowerMenus[j].haveRight){
                              innerhtml += "checked='true' ";
                          }
                    	  innerhtml += ">"
		  		              + result[i].lowerMenus[j].name + "</td>";
		  		      }
	  		          if(j % 5 == 4){
		  		          innerhtml += "</tr>"
	  		          } 
		  		  }
		  		  innerhtml += "</table></div>"
			  		  
		  		  innerhtml += "</div>";
		  		  html += innerhtml;
		      }

	  		  $("#" + "menuDivOf" + id).append(html);
		  }
		}); 
	}	
</script>